<template>
	<v-container>
			
	<div class="text-center ma-2">
    <v-snackbar
      v-model="snackbar.isOpen"
      top
    >
      {{ snackbar.text }}
      <v-btn
        color="pink"
        text
        @click="snackbar.isOpen = false"
      >
        X
      </v-btn>
    </v-snackbar>
  	</div>
	<v-form>
		<div class="headline text-center">{{ msg }}</div>
		<div class="body-2  text-center">
			注册您的利佳账号
		</div>
    <v-container>
      <v-row>
        <v-col cols="12" sm="6" md="3">
            <v-row no-gutters>
                <v-col
                    cols="3"
                >
                <v-select
                    :items="itacs"
                    value = "+86"
                    v-model="itac"
                    outlined
                ></v-select>
                </v-col>
                <v-col
                    cols="9"
                >
                <v-text-field
                    label="手机号码"
                                v-model="phone"
                    outlined
                ></v-text-field>
                </v-col>
                </v-row>
						<v-text-field
							type="password"
							label="设置密码"
							v-model="password"
							outlined
						></v-text-field>
                        <v-text-field
							type="password"
							label="确认密码"
							v-model="password2"
							outlined
						></v-text-field>
              <v-text-field
                v-model="code"
                outlined
                type="Number"
                label="验证码"
                >

                <template v-slot:append>
                <v-fade-transition leave-absolute>                    
                </v-fade-transition>
                </template>
                <template v-slot:append-outer>
                <v-menu
                    style="top: -12px"
                    offset-y
                >
                    <template v-slot:activator="{ on }">
                    <v-btn  v-on="on" @click="getphonecode" :loading="authcode">
                            <span v-show="sendAuthCode" > 获取验证码 </span>
                            <span v-show="!sendAuthCode"> {{auth_time}}秒重新获取 </span>
                    </v-btn>
                    
                    </template>
                </v-menu>
                </template>
            </v-text-field>
       
						<div class="body-2">
								<router-link class="link" to="/resetpassword">忘记了密码？</router-link>
						</div>
					</v-col>
					<v-col cols="12" sm="6" md="1">
						<div class="body-2  text-left">
							使用利佳健康服务，您需要了解我们的<router-link class="link" to="/home">隐私政策</router-link>
						</div>
					</v-col>
					<v-col class="" cols="12" sm="6" md="1">
							<div class="my-2 float-right">
								<v-btn min-width="88px" v-on:click="register" color="success">注册</v-btn>
							</div>
							<div class="my-2">
								<router-link class="link" to="login">已有账号</router-link>
							</div>
					</v-col>	
				</v-row>
			<v-row>

      </v-row>
    </v-container>
		
  </v-form>

	</v-container>
</template>

<script>
import { register, getphonecode, oauthlogin } from './../api/api';
export default {
	data: () => ({
		phone:'',
        password:'',
        password2:'',
        code:'',
        itac:'+86',
		itacs: ['+86', '+852'],
		snackbar: {
			isOpen:false,
			text:'',
        },
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
        authcode:false,
	}),
  name: 'Register',
  props: {
    msg: String
    },
    created:function(){
        this.$store.commit('setProgress',false)
    },
	methods: {
		getphonecode: function (event){
            this.authcode = true
            if(this.sendAuthCode){
                getphonecode(this.phone,this.itac,gethl('hl'),2)
                .then((resp)=>{
                    var res = resp.data;
                    this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                    this.authcode = false
                    if(res.code == 1){
                        this.sendAuthCode = false;
                        this.auth_time = 60;
                        var auth_timetimer =  setInterval(()=>{
                            this.auth_time--;
                            if(this.auth_time<=0){
                                this.sendAuthCode = true;
                                clearInterval(auth_timetimer);
                            }
                        }, 1000);
                    }
                })
                .catch((res)=>{
                    this.authcode = false
                    this.$store.commit('setAlert',{icon:'close',text:res,show:true})
                })
            }
            
        },
        register: function (event){
            if(this.password != this.password2){
                this.$store.commit('setAlert',{icon:'close',text:'两次密码不一致',show:true})
                    return
            }
            if(!this.code==''){
                register(this.phone,this.password,this.itac,this.code)
                .then((resp)=>{
                    var res = resp.data;
                    if (res.code == 1){
                        this.$store.state.authtoken = res.authtoken;
                        this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                        // this.$cookies.set("authtoken", res.authtoken) 
                        oauthlogin(this.phone, res.authtoken)
                        .then((resp)=>{
                            var res = resp.data;
                            if (res.code == 1){
                                window.location.href = res.data.uri
                            }
                        this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                        })
                        // this.$router.push({path:'/user/center'})
                    }else{
                        this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                    }
                })
                .catch((err)=>{
                        this.$store.commit('setAlert',{icon:'close',text:err,show:true})
                })
            }else{
                this.$store.commit('setAlert',{icon:'close',text:"请输入验证码",show:true})
            }
            
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loginbtn {
	min-width: 88px;
}
.link {
	color:#1a73e8;
}
</style>
